<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web前端开发者超级有用的几款JS库</title>
</head>

<body>
	<p
		style="color: #69F; text-align: center; font-size: 18px; font-weight: bold;">Web前端开发者超级有用的几款JS库</p>
	<p>
		<strong>1、Modernizr：</strong>专为HTML5和CSS3开发的功能检测类库。推荐度：*****
	</p>
	<p>Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。</p>
	<p>当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如
		@font-face、border-radius、 border-image、box-shadow、rgba()
		等，同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的
		&lt;input&gt;标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对HTML5的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。</p>
	<p>Modernizr是基于渐进增强理论来开发的，所以它支持并鼓励开发者一层一层的创建他们的网站。一切从一个应用了Javascript的空闲地基开始，一个接一个的添加增强的应用层。因为使用了Modernizr，所以你容易知道浏览器都支持什么。</p>
	<p>
		链接地址：<a href="http://www.modernizr.com">http://www.modernizr.com</a>
	</p>
	<p>&nbsp;</p>
	<p>
		<strong>2、YepNope：</strong>按条件加载资源（JS和CSS）工具。推荐度：*****
	</p>
	<p>YepNope.js 是一个基于条件的异步资源（JS和CSS）加载工具，其特点是快速，支持JS脚本和CSS的按需加载。
		即，根据条件判断的结果（Yep或Nope）以决定是否加载指定的资源（JS和CSS）。</p>
	<p>
		链接地址：<a href="http://www.yepnopejs.com">http://www.yepnopejs.com</a>
	</p>
	<p>&nbsp;</p>
	<p>
		<strong>3、MicroJS：</strong>
	</p>
	<p>MicroJS 是最新推出的一个网站项目，致力于为最常见的开发任务提供 JavaScript
		轻量库，有Ajax，JSON，DOM，面向对象的 JavaScript 等等，是真正值得你存入书签的金矿。
		即，MicroJS官网上收集了平时最觉用的JavaScript 轻量库。</p>
	<p>
		链接地址：<a href="http://www.microjs.com">http://www.microjs.com</a>
	</p>
	<p>&nbsp;</p>
	<p id="n004">
		<strong>4、Respond</strong><strong></strong>：让IE6-IE8支持CSS3 Media
		Query功能。
	</p>
	<p>
		虽然IE 9+，Firefox 3.5+，Opera 7+，Safari 3+ 和 Chrome等浏览器都已经支持CSS3 Media
		Query功能。但遗憾的是，IE6-IE8 及其他更老版本的浏览器并不支持CSS3 Media Query功能，幸好，可以通过使用
		JavaScript  弥补这方面的不足，Respond.js就是其中不错的一个解决方案（其他方案还有：<strong><a
			href="#n005">css3-mediaqueries.js</a></strong>）。Respond.js 是一个用于在不支持 CSS3
		Media Query 的浏览器中使用 Media Query 功能。
	</p>
	<p>
		类似的还有：<strong><a href="#n005">css3-mediaqueries.js</a></strong>
	</p>
	<p>
		链接地址：<a href="https://github.com/scottjehl/Respond">https://github.com/scottjehl/Respond</a>
	</p>
	<p>&nbsp;</p>
	<p id="n005">
		<strong>5、css3-mediaqueries.js：</strong>让IE6-IE8支持CSS3 Media Query功能。
	</p>
	<p>
		与<strong><a href="#n004">Respond.js</a></strong>库类似，css3-mediaqueries.js也是为了让IE6-IE8支持CSS3
		Media Query功能。
	</p>
	<p>
		用法：在head标签中添加以下代码：<br />
	</p>
	<pre>&lt;!--[if lt IE 9]&gt;<br />&lt;script src=&quot;http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js&quot;&gt;&lt;/script&gt;<br />&lt;![endif]--&gt;</pre>
	<p>
		链接地址：<a href="http://code.google.com/p/css3-mediaqueries-js/">http://code.google.com/p/css3-mediaqueries-js/</a>
	</p>
	<p>&nbsp;</p>
	<p>
		<strong>6、html5shiv或html5shim</strong>：让IE6-IE8支持新出现的HTML5标签（例如：article，footer，header，section等）。
	</p>
	<p>html5shiv和html5shim其实是同一个JS库，只是html5shim后来才更名为html5shiv。让IE（IE6/IE7/IE8）支持HTML5标签，我们需要在HTML头部添加以下JavaScript，这是一个简单的
		document.createElement声明，利用条件注释针对IE来调用这个html5shiv.js文件。Opera，FireFox等其他非IE浏览器就会忽视这
		段代码，也不会存在http请求。</p>
	<p>
		用法：在head标签中添加以下代码：<br />
	</p>
	<pre>&lt;!--[if lt IE 9]&gt;<br />&lt;script src=&quot;http://html5shiv.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;<br />&lt;![endif]--&gt;</pre>
	<p>
		链接地址：（1）html5shiv：<a href="https://github.com/aFarkas/html5shiv">https://github.com/aFarkas/html5shiv</a>（2）html5shim：<a
			href="http://code.google.com/p/html5shim/">http://code.google.com/p/html5shim/</a>
	</p>
	<p>&nbsp;</p>
	<p>
		7、<strong>IxEdit：傻瓜式JavaScript开发工具</strong>。推荐度：*****
	</p>
	<p>IxEdit是一个傻瓜式的JavaScript开发工具（其实就是JavaScript代码库）。无需掌握什么JavaScript基础，你就利用IxEdit方便的制作出一些常用的很牛叉的页面动态、交互效果。IxEdit虽然说是JavaScript开发工具，其实也就是一个基于jQuery和jQuery
		UI 的JavaScript 脚本库而已。所以，需要jQuery 和 jQuery UI
		。但是IxEdit是一个超级牛叉的JavaScript库。</p>
	<p>用法：参考网址：http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html</p>
	<p>提醒：有时使用时，会发现JS出错，需要将ixedit.js的大约5500行左右的一行代码：</p>
	<p>
		ixedit.db = openDatabase(dbName, '1.0');<br /> 修改为：<br /> ixedit.db
		= openDatabase(dbName, '1.0',dbName,100);
	</p>
	<p>
		链接地址：（1）IxEdit官网：<a href="http://www.ixedit.com/">http://www.ixedit.com/</a>（2）github上的IxEdit：<a
			href="https://github.com/perchouli/ixedit">https://github.com/perchouli/ixedit</a>
		（3）博客园（博主：杨正祎）：<a
			href="http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html">http://www.cnblogs.com/JustinYoung/archive/2009/11/18/ixedit.html</a>。
	</p>
	<p>&nbsp;</p>
	<p>
		8、<strong>RequireJS：提升网页加载JS文件的速度</strong>。推荐度：****
	</p>
	<p>用处：专门用于提升网页加载JS文件的速度（采用异步加载JS的方式）。</p>
	<p>
		链接地址：官网：<a href="http://www.requirejs.org/">http://www.requirejs.org/</a>
	</p>
	<p>&nbsp;</p>
	<p>
		9、<strong>KISSY：淘宝使用的 JavaScript 框架，相当于jQuery一类的JS框架。</strong>。推荐度：****
	</p>
	<p>用处：除了完备的工具集合如 DOM、Event、Ajax、Anim 等，它还提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的 JavaScript 框架，KISSY 为移动终端做了大量适配和优化，让你的程序在全终端均能流畅运行。</p>
	<p>
		链接地址：官网：<a href="http://docs.kissyui.com/">http://docs.kissyui.com/</a><br>
		Google HTML/CSS 规范（英文）：<a href="http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml">http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml</a><br>
		Google JavaScript 规范：<a href="http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/google-js-style.html">http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/google-js-style.html</a><br>
		CSS 编码规范：<a href="http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/css-coding-style.html">http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/css-coding-style.html</a><br>
		HTML 编码规范：<a href="http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/html-coding-style.html">http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/html-coding-style.html</a><br>
		JavaScript 语言规范：<a href="http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/js-lang-rules.html">http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/js-lang-rules.html</a><br>
		JavaScript 编码风格：<a href="http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/js-style-rules.html">http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/js-style-rules.html</a><br>
	</p>
	<p>&nbsp;</p>
</body>
</html>
